<template>
	<div class="lxl-wrap">
		<h1>系统登陆</h1>
		<el-form ref="lxlform" class="lxl-form" :model="lxlform" :rules="rules" label-width="120px">
			<el-form-item label="登录名" prop="username" >
				<el-input v-model="lxlform.username" placeholder="手机号/邮箱"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="password" >
				<el-input v-model="lxlform.password" show-password placeholder="密码"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button plain="" type="primary" @click="login">登陆</el-button>
				<el-button style="float: right;" plain="" type="primary" @click="gopwd">找回密码</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import { post } from '@/plugins/axios'
export default {
	name: 'LxlForm',
	data () {
		return {
			url: {
				login: '/umsUser/login'
			},
			lxlform: {
				username: '',
				password: ''
			},
			rules: {
				username: [
					{ required: true, message: '请输入登陆名', trigger: 'blur' }
				],
				password: [
					{ required: true, message: '请输入密码', trigger: 'blur' }
				]
			}
		}
	},
	methods: {
		gopwd() {
			this.$emit('update:r', '180deg')
		},
		login(){
			this.$refs.lxlform.validate(valid => {
				if(valid){
					post(this.url.login,this.lxlform,response=>{
						this.$store.commit('SET_TOKEN', response)
						this.$router.push('/')
					})
				}
			})
		}
	}
}
</script>

<style scoped lang="less">
.lxl-wrap {
	transform: rotateY(0deg) translateZ(1px);
}
</style>
